<!-- playground-fold -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample</title>
</head>

<body style="background-color: var(--sapBackgroundColor)">
    <!-- playground-fold-end -->

    <ui5-list selection-mode="Single" header-text="Single Select Mode">
        <ui5-li selected icon="map" icon-end>Argentina</ui5-li>
        <ui5-li icon="map" icon-end>Bulgaria</ui5-li>
        <ui5-li icon="map" icon-end>China</ui5-li>
        <ui5-li type="Inactive" icon="map" icon-end>Denmark (ui5-li type='Inactive')</ui5-li>
    </ui5-list>
    <br>
    <ui5-list selection-mode="SingleStart" header-text="Single Select Begin Mode">
        <ui5-li selected icon="map" icon-end>Argentina</ui5-li>
        <ui5-li icon="map" icon-end>Bulgaria</ui5-li>
        <ui5-li icon="map" icon-end>China</ui5-li>
        <ui5-li type="Inactive" icon="map" icon-end>Denmark (ui5-li type='Inactive')</ui5-li>
    </ui5-list>
    <br>
    <ui5-list selection-mode="SingleEnd" header-text="Single Select End Mode">
        <ui5-li selected icon="map" icon-end>Argentina</ui5-li>
        <ui5-li icon="map" icon-end>Bulgaria</ui5-li>
        <ui5-li icon="map" icon-end>China</ui5-li>
        <ui5-li type="Inactive" icon="map" icon-end>Denmark (ui5-li type='Inactive')</ui5-li>
    </ui5-list>
    <br>
    <ui5-list selection-mode="Multiple" header-text="Multi Select Mode">
        <ui5-li>Pineapple</ui5-li>
        <ui5-li selected>Orange</ui5-li>
        <ui5-li>Banana</ui5-li>
        <ui5-li>Mango</ui5-li>
    </ui5-list>
    <br>
    <ui5-list selection-mode="Delete" header-text="Delete Mode">
        <ui5-li>Argentina</ui5-li>
        <ui5-li>Bulgaria</ui5-li>
        <ui5-li>China</ui5-li>
    </ui5-list>
    <!-- playground-fold -->
    <script type="module" src="main.js"></script>
</body>

</html>
<!-- playground-fold-end -->
